<template>
	<div class="data_detail_wrapper">
		<div class="item">
			<div class="label">所属课题：</div>
			<topic-info :data="topicData"></topic-info>
		</div>
		<el-row>
			<el-col :span="16">
				<div class="item">
					<div class="label">实验名称：</div>
					<div class="content">{{ data.filed7 }}</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="item">
					<div class="label">测量技术：</div>
					<div class="content">{{ data.expName }}</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="item">
					<div class="label">房间：</div>
					<div class="content">{{ data.room }}</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="item">
					<div class="label">实验PI：</div>
					<div class="content">{{ data.headName }}</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="item">
					<div class="label">开始时间：</div>
					<div class="content">{{ data.startTime }}</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="item">
					<div class="label">用户：</div>
					<div class="content">{{ data.userName }}</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="item">
					<div class="label">用户单位：</div>
					<div class="content">{{ data.source }}</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="item">
					<div class="label">预约机时：</div>
					<div class="content">{{ data.filed3 }}</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="item">
					<div class="label">运维工程师：</div>
					<div class="content">{{ data.filed9 }}</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="item">
					<div class="label">液氦预约量：</div>
					<div class="content">
						{{ data.filed1 }}
						<template v-if="!!data.filed1">升(L)</template>
					</div>
				</div>
			</el-col>
			<el-col :span="8" v-if="!!data.filed4">
				<div class="item">
					<div class="label">液氦审批量：</div>
					<div class="content">{{ data.filed4 }}升(L)</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import topicInfo from '../topicInfo';
import { topicDetail } from '@/api/business/tbTopic';
export default {
	components: { topicInfo },
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			topicData: {}
		};
	},
	computed: {
		...mapGetters(['siteConfig']),
		stationRooms() {
			return this.siteConfig.filter((n) => n.type === '6');
		},
		applyFileData() {
			return !this.data.fileJson ? [] : JSON.parse(this.data.fileJson);
		}
	},
	watch: {
		data(data) {
			this.getTopicDetail(data.name);
		}
	},
	methods: {
		//获取课题数据
		async getTopicDetail(id) {
			let result = await topicDetail(id).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.topicData = this.$detailData(result.data) || {};
			}
		},

		//下载文件
		handleDownloadFile(data) {
			let suffix = data.url.split('.');
			let name = `${data.name}.${data.suffix || suffix[suffix.length - 1]}`;
			this.$fileDownload(data.url, name);
		}
	}
};
</script>

<style lang="scss" scoped></style>
